<template>
    <div class="main-container">
        <div class="main">
            <div class="search-container" ref="search">
                <div class="left">
                    <div class="item-box">
                        <div class="name">发布状态</div>
                        <el-select v-model="searchParam.notificationStatus">
                            <el-option v-for="item in notificationOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <el-input placeholder="搜索关键字" @keyup.enter.native="searchData" prefix-icon="el-icon-search"
                        v-model="searchParam.queryStr">
                    </el-input>
                    <el-button size="mini" type="primary" @click="searchData" style="margin-left: 20px">搜索</el-button>
                    <el-button size="mini" @click="searchParam.queryStr = ''" class="reset">重置</el-button>
                </div>
                <div class="right">
                    <el-button type="primary" size="mini" @click="bannerHandle">公告轮播管理</el-button>
                    <el-button type="primary" icon="el-icon-plus" v-if="hasButtonPermission('add')"
                        @click="add('dataForm')" size="mini">新增</el-button>
                </div>
            </div>
            <ul class="table-container" ref="table">
                <div v-if="tableData.length > 0">
                    <li v-for="(item, index) in tableData" :key="item.F_Id">
                        <div class="toggle-static" v-if="item.cover_picture_info && item.cover_picture_info.filePath">
                            <img style="max-width: 190px; height: 160px" :src="item.cover_picture_info.filePath" />
                            <div class="tip-text" v-if="item.cover_content">{{ item.cover_content }}</div>
                        </div>
                        <div v-else class="toggle-static">
                            <img style="min-width: 190px; height: 160px;" :src="filterImg(item.cover_template_id)">
                            <div class="tip-text" v-if="item.cover_content">{{ item.cover_content }}</div>
                        </div>
                        <div class="right-content">
                            <h5 @click="viewRow(item)"><div v-if="item.is_top == 1" class="top">置顶</div>{{ item.title }}<span>></span>
                                <div v-if="item.notification_status == 20" class="fa">已发布</div>
                                <div v-if="item.notification_status == 10" class="bufa">未发布</div>
                            </h5>
                            <div class="msg">
                                <span>作者：</span>{{ item.author }}
                            </div>
                            <div class="msg">
                                <span>新闻类别：</span>{{ item.notification_type | notificationTypeFilter }}
                            </div>
                            <div class="msg">
                                <span>发布时间：</span>{{ item.publish_time }}
                            </div>
                            <div class="msg">
                                <span>更新时间：</span>{{ item.modify_date }}
                            </div>
                            <ol class="opera">
                                <li>
                                    <el-button type="primary" size="mini" plain @click="viewRow(item)">查看</el-button>
                                </li>
                                <li v-if="hasButtonPermission('del') && item.notification_status == 10">
                                    <el-button type="danger" size="mini" plain @click="deleteForm(item)">删除</el-button>
                                </li>
                                <li v-if="item.notification_status == 10 && hasButtonPermission('release')">
                                    <el-link :underline="false" icon="el-icon-top-right" @click="changeState(item, 20)">
                                        发布</el-link>
                                </li>
                                <li v-if="item.notification_status == 20 && hasButtonPermission('noRelease')">
                                    <el-link :underline="false" icon="el-icon-bottom" @click="changeState(item, 10)">下架
                                    </el-link>
                                </li>
                                <li
                                    v-if="item.is_top == 0 && item.notification_status == 20 && hasButtonPermission('top')">
                                    <img :src="require('@/assets/imgs/wel/noTop.png')" />
                                    <el-link :underline="false" @click="setTopHandle(item, 1)">置顶
                                    </el-link>
                                </li>
                                <li v-if="item.is_top == 1 && hasButtonPermission('noTop')">
                                    <img :src="require('@/assets/imgs/wel/top.png')" />
                                    <el-link :underline="false" @click="setTopHandle(item, 0)">取消置顶
                                    </el-link>
                                </li>
                                <li v-if="item.notification_status == 10 && hasButtonPermission('edit')">
                                    <el-link icon="el-icon-edit" :underline="false" @click="editForm(item)">编辑</el-link>
                                </li>
                            </ol>
                        </div>
                    </li>
                </div>
                <div v-else>暂无数据</div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="searchParam.limit" :page-sizes="[10, 20, 30, 50]" :page-size="searchParam.size"
                    layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </ul>
        </div>
        <!-- 新增弹窗 -->
        <el-dialog v-dialogDrag class="add-dialog" :close-on-click-modal="false" :title="dialogTitle"
            :visible.sync="addVisible" width="900px" :before-close="beforeClose" style="padding: 10px 20px;">
            <div class="companiesuser-form">
                <el-form :rules="rules" ref="dataForm" :model="dataForm" label-width="75px"
                    :validate-on-rule-change="false">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="title" label="公告标题">
                                <el-input placeholder="请输入标题，最长不超过50字" size="small" v-model="dataForm.title"
                                    :maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="author" label="作者">
                                <el-input placeholder="请输入" size="small" :maxlength="20" v-model="dataForm.author">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="notification_type" label="公告类别">
                                <el-select v-model="dataForm.notification_type" placeholder="请选择" size="small"
                                    style="width: 100%">
                                    <el-option v-for="(item, index) in noticeCategory" :key="index"
                                        :label="item.F_ItemName" :value="item.F_ItemValue"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="cover_picture_id" class="picture-item" label="封面图片">
                                <el-upload ref="elFile" :on-change="fileChange" :file-list="fileList"
                                    :auto-upload="false" :limit="1" :on-exceed="fileExceed" :on-remove="fileRemove"
                                    accept=".png,.jpeg,.bmp,.gif,.png">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>

                                <div class="picture-container">
                                    <img style="width: 450px; height: auto" :src="dataForm.img_url" />
                                </div>
                                <el-button type="primary" size="mini" class="edit-image" @click="editImage">编辑
                                </el-button>
                                <div class="text">{{ dataForm.cover_content }}</div>
                                <div>推荐尺寸 750 * 300；支持 .jpg, jpeg, .bmp, .gif, .png 类型文件, 5M 以内</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="notification_source" label="公告来源">
                                <el-radio-group v-model="dataForm.notification_source">
                                    <el-radio v-for="item in noticeSource" :key="item.F_ItemValue"
                                        :label="item.F_ItemValue" :disabled="sourceDisabled">{{ item.F_ItemName }}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="dataForm.notification_source == '20'">
                        <el-col :span="24">
                            <el-form-item prop="redirect_url" label="链接地址">
                                <el-input placeholder="请输入" size="small" v-model="dataForm.redirect_url"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="dataForm.notification_source == '10'">
                        <el-col :span="24">
                            <el-form-item prop="content" :label="$t('Notice.labelContent')">
                                <!-- <avue-ueditor placeholder="请填写内容" size="small" v-model="dataForm.F_NewsContent"></avue-ueditor> -->
                                <!-- v-if实现tinymce组件销毁，否则内容渲染不正常 -->
                                <el-input type="textarea" v-model="dataForm.content"></el-input>
                                <!-- <tinymce height="500" v-model="dataForm.content" v-if="addVisible"></tinymce> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="user_ids" label="接收范围">
                                <!-- <el-input @focus="chooseUser()" v-model="dataForm.user_name" placeholder="请选择人员">
                                </el-input> -->
                                <xjr-select-user v-model="dataForm['user_ids']" :key="userKey" placeholder="请选择人员"
                                    :userIds="dataForm.user_ids"></xjr-select-user>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-checkbox style="margin-left: 75px" v-model="dataForm.is_top">直接发布并设为置顶公告</el-checkbox>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancelForm('dataForm')">{{ $t('buttonModule.modalCancelBtn') }}
                </el-button>
                <el-button size="mini" type="primary" @click="formSubmit('dataForm')" :loading="flagNotice">
                    {{ flagNotice ? $t('workFlow.WFMenu.hintSubmit') : $t('buttonModule.modalSureBtn') }}
                </el-button>
            </span>
        </el-dialog>
        <!-- 轮播管理 -->
        <el-dialog v-dialogDrag title="公告轮播管理" class="banner-dialog" :visible.sync="bannerVisible" width="400px">
            <div class="header">
                <div class="title">工作台轮播公告数：</div>
                <el-input-number v-model="bannerInfo.slideshow_amount" :min="0" :max="10">
                </el-input-number>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="submitBanner">提交</el-button>
                <el-button size="mini" @click="bannerVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 查看详情 -->
        <el-dialog v-dialogDrag title="查看详情" class="news-dialog" :visible.sync="newsVisible" width="80%">
            <div class="header" v-if="newDetail.author">
                <el-image style="width: 150px; height: 40px" :src="require('../../../public/img/logo-blank.png')"
                    fit="contain"></el-image>
                <div class="msg">
                    <el-tag type="info" size="mini">{{ newDetail.notification_type | notificationTypeFilter }}</el-tag>
                    <span>{{ newDetail.publish_time }}</span>
                    <span>{{ newDetail.author }}</span>
                </div>
                <div class="new-content">
                    <div class="title">{{ newDetail.title }}</div>
                    <div v-html="newDetail.content"></div>
                </div>
            </div>
        </el-dialog>
        <el-dialog v-dialogDrag title="换一个封面模版" :visible.sync="coverVisible" class="cover-dialog" width="50%">
            <ul class="banner-list">
                <li v-for="item in coverImageList" key="item.type">
                    <el-image :src="item.url" fit="contain"></el-image>
                    <el-radio v-model="dataForm.cover_template_id" :label="item.type"></el-radio>
                </li>
            </ul>
            <div class="header">
                <div class="name">显示封面文案</div>
                <el-input v-model="dataForm.cover_content" :maxlength="50" placeholder="最多不超过50个字"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="coverVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="confirmCover">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import newContent from './content.vue';
import MainFixed from "../../page/main/MainFixed";
import MainContent from "../../page/main/MainContent";
import { getNoticeCategory, notificationInfo, notificationAmount, notificationSource, getNoticeDetail, setTop, getNotice, addNotice, modifyNotice, deleteNotice, setPublished } from '@/api/officeautomation/notice';
import authorizeMixin from "@/mixins/authorize"; //鉴权混入
import { baseUrl } from "@/config/env";
import axios from 'axios'
export default {
    name: "News",
    mixins: [authorizeMixin],
    components: { MainContent, MainFixed, newContent },
    data() {
        const _this = this;
        return {
            flagNotice: false,
            contentTitle: '通知公告',
            addVisible: false,
            newsVisible: false,
            dialogTitle: '',
            searchParam: { limit: 1, size: 10, queryStr: '', notificationStatus: '20' },
            notificationOptions: [{
                value: '',
                label: '全部'
            }, {
                value: '10',
                label: '未发布'
            }, {
                value: '20',
                label: '已发布'
            }],
            total: 0,
            dataForm: {
                title: '', // 公告标题
                author: '', // 作者
                notification_type: '', // 公告类别
                img_url: '', // 图片反选
                cover_picture_id: '', // 封面图片文件 id
                cover_picture_folder_id: '', // 封面图片文件夹 id
                notification_source: '10', // 公告来源
                redirect_url: '', // 链接地址
                cover_content: '', // 封面文案
                content: '', // 正文
                user_ids: '', // 接受范围
                user_name: '', // name
                is_top: false, // 置顶
                cover_template_id: '', // 封面模版 id
            },
            fileList: [],//文件存储中间量
            newDetail: {},
            sourceDisabled: false, // 公告来源禁用
            rules: {
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
                notification_type: [{ required: true, message: '请选择公告类别', trigger: 'change' }],
                notification_source: [{ required: true, message: '请选择公告来源', trigger: 'change' }],
                redirect_url: [{ required: true, message: '请输入链接地址', trigger: 'blur' }],
                content: [{ required: true, message: '请输入内容', trigger: 'change' }],
                user_ids: [{ required: true, message: '请选择接受范围', trigger: 'blur' }]
            },
            noticeCategory: [], // 公告类别
            noticeSource: [], // 公告来源
            tableData: [],
            screenWidth: 0, // 屏幕分辨率,
            bannerVisible: false, // 公告轮播显示与否
            bannerInfo: {
                F_Id: '',
                slideshow_amount: 0
            },
            coverVisible: false, // 封面弹窗
            userKey: 1,
            coverImageList: [
                {
                    url: 'http://140.143.229.24:9000/tlbucket/xjr/20220823/42bccddd121c4ffc9eaf2e4c19d37991.png',
                    type: '1',
                    fileId: '1d3d49271a09bcbf8d2aab13deb9a194',
                    folderId: '9edf49ac5aa9f4c589ac286005857354'
                },
                {
                    url: 'http://140.143.229.24:9000/tlbucket/xjr/20220823/24e1c3b910634693849b685a3d8d57f1.png',
                    type: '2',
                    fileId: '0d337db8643bdd2122264aaeab6dc161',
                    folderId: '80bcc91a2a0059826bedcce4f9256149'
                },
                {
                    url: 'http://140.143.229.24:9000/tlbucket/xjr/20220823/900b920d8ece4ee3b3049780d25029f2.png',
                    type: '3',
                    fileId: '7e85a0f88e0e63a2a074fb035e1aa570',
                    folderId: '1836572b87d32b216ce3d43e3bc9202b'
                }
            ]
        }
    },
    created() {
        this.getNoticeCategory();
        this.getNotificationSource()
    },
    mounted() {
        this.getData(this.searchParam)
        this.screenWidth = document.body.clientWidth
        window.onresize = () => {
            return (() => {
                this.screenWidth = document.body.clientWidth
            })()
        }
        // 修改父组件容器高度为 auto
        setTimeout(() => {
            this.$parent.$refs.avueView.style.height = 'auto'
        }, 0)
    },
    watch: {
        screenWidth() {
            let domHeight = document.body.clientHeight
            this.$refs.table.style.height = domHeight - this.$refs.search.offsetHeight - 155 + 'px'
            // console.log(domHeight, `顶部导航-64, 面包屑-57, 容器内边距-26, 搜索框-74`)
        }
    },
    filters: {
        notificationTypeFilter(val) {
            if (val == 10) {
                return '会议通知'
            } else if (val == 20) {
                return '活动公告'
            } else if (val == 30) {
                return '社会公告'
            } else if (val == 40) {
                return '内部公告'
            } else if (val == 50) {
                return '其他公告'
            }
        },
    },
    methods: {
        getNotificationInfo() {
            notificationInfo().then(res => {
                if (res.data.success) {
                    this.bannerInfo = res.data.data
                }
            })
        },
        // 过滤本地模版图片
        filterImg(val) {
            let url = this.coverImageList.map(ele => {
                if (val == ele.type) {
                    return ele.url
                }
            })
            return url[0]
        },
        handleRowDBLClick(row, event) {
            if (this.openDoubleClickEdit && row.F_EnabledMark == 0) {
                this.editForm(row)
            } else {
                this.$message({
                    message: '通告已发布,不允许编辑',
                    type: 'warning'
                })
            }
        },
        // 公告类别
        getNoticeCategory() {
            getNoticeCategory('NotificationType').then(res => {
                if (res.data.code == 0) {
                    this.noticeCategory = res.data.data;
                }
            })
        },
        // 公告来源
        getNotificationSource() {
            notificationSource('NotificationSource').then(res => {
                if (res.data.code == 0) {
                    this.noticeSource = res.data.data
                }
            })
        },
        /* 获取数据 */
        getData(params) {
            getNotice(params).then(res => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data.Rows;
                    this.total = res.data.data.Total;
                }
            })
        },
        /* 新增 */
        add(formName) {
            this.sourceDisabled = false
            this.flag = true;
            this.addVisible = true;
            this.dialogTitle = this.$t('Notice.dialogTitle.Add');
            this.fileList = []
            this.$nextTick(() => {
                this.$refs[formName].resetFields();
                this.userKey++
                this.dataForm.content = ''
                this.dataForm.img_url = this.coverImageList[0].url
                this.dataForm.cover_template_id = '1'
                this.dataForm.cover_picture_id = this.coverImageList[0].fileId
                this.dataForm.cover_picture_folder_id = this.coverImageList[0].folderId
                this.dataForm.is_top = false
                this.dataForm.F_Id = ''
                this.dataForm.cover_content = ''
                this.$refs.elFile.clearFiles()
            })
        },
        /* 编辑 */
        editForm(row) {
            this.sourceDisabled = true
            this.flag = false;
            this.addVisible = true;
            this.dialogTitle = this.$t('Notice.dialogTitle.Edit');
            this.fileList = []
            getNoticeDetail(row.F_Id).then(res => {
                this.userKey++
                if (res.data.code == 0) {
                    let resData = res.data.data
                    Object.keys(this.dataForm).forEach((key) => {
                        if (key == 'user_ids') {
                            this.dataForm[key] = resData.user_ids.join(',')
                        } else {
                            this.dataForm[key] = resData[key]
                        }
                    })
                    this.dataForm.F_Id = resData.F_Id
                    this.dataForm.is_top = this.dataForm.is_top == 1 ? true : false
                    if (resData.cover_picture_info) {
                        this.dataForm.img_url = resData.cover_picture_info.filePath
                        this.fileList.push({ name: resData.cover_picture_info.fileName, url: resData.cover_picture_info.filePath })
                    } else if(resData.cover_template_id != '') {
                        this.dataForm.img_url = resData.img_url
                        this.dataForm.cover_template_id = resData.cover_template_id
                        this.dataForm.cover_picture_id = resData.cover_picture_id
                        this.dataForm.cover_picture_folder_id = resData.cover_picture_folder_id
                    } else {
                        this.dataForm.img_url = this.coverImageList[0].url
                        this.dataForm.cover_template_id = '1'
                        this.dataForm.cover_picture_id = this.coverImageList[0].fileId
                        this.dataForm.cover_picture_folder_id = this.coverImageList[0].folderId
                    }
                }
            })

        },
        beforeClose(done) {
            done()
        },
        // 发布，下架
        changeState(row, typeVal) {
            setPublished(row.F_Id, typeVal).then(res => {
                if (res.data.code == 0) {
                    this.$notify({
                        title: typeVal == 10 ? '下架' : '发布',
                        message: typeVal == 10 ? '下架成功' : '发布成功',
                        type: 'success'
                    })
                    if (typeVal == 10) {
                        setTop(row.F_Id, 0).then(res => {
                            if (res.data.code == 0) {
                                this.searchParam.limit = 1;
                                this.getData(this.searchParam)
                            }
                        })
                    } else {
                        this.getData(this.searchParam)
                    }
                } else {
                    this.$notify({
                        title: typeVal == 10 ? '下架' : '发布',
                        message: typeVal == 10 ? '下架失败' : '发布失败',
                        type: 'error'
                    })
                }
            })
        },
        // 置顶，取消置顶
        setTopHandle(row, typeVal) {
            setTop(row.F_Id, typeVal).then(res => {
                if (res.data.code == 0) {
                    this.$notify({
                        title: typeVal == 0 ? '取消置顶' : '置顶',
                        message: typeVal == 0 ? '取消置顶成功' : '置顶成功',
                        type: 'success'
                    })
                    this.searchParam.limit = 1;
                    this.getData(this.searchParam)
                } else {
                    this.$notify({
                        title: typeVal == 10 ? '取消置顶' : '置顶',
                        message: typeVal == 10 ? '取消置顶失败' : '置顶失败',
                        type: 'error'
                    })
                }
            })
        },
        viewRow(row) {
            getNoticeDetail(row.F_Id).then(res => {
                if (res.data.code == 0) {
                    let resData = res.data.data

                    if (resData.notification_source == '20') {
                        window.open(resData.redirect_url, '_blank')
                    } else {
                        this.newsVisible = true;
                        this.newDetail = resData
                    }
                }
            })
        },
        // 文件上传
        fileChange(file) {
            let fileType = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()

            const isPNG = fileType === 'jpg' || fileType === 'jpeg' || fileType === 'bmp' || fileType === 'gif' || fileType === 'png';
            const isLt2M = file.size / 1024 / 1024 < 5;

            if (!isPNG) {
                this.$notify.warning('上传头像图片只能是 jpg, jpge, bmp, gif, png 格式!');
                this.dataForm.cover_picture_id = ''
                this.fileList = []
                return false
            }
            if (!isLt2M) {
                this.$notify.warning('上传头像图片大小不能超过 5MB!');
                this.dataForm.cover_picture_id = ''
                this.fileList = []
                return false
            }
            let dataForm = new FormData();//new一个表单对象
            dataForm.append("file", file.raw);
            axios({
                method: 'post',
                url: `${baseUrl}/upload/oss`,
                headers: { 'Content-Type': 'multipart/form-data' },
                data: dataForm
            }).then(res => {
                if (res.data.success) {
                    let resData = res.data.data
                    this.$notify.success('图片上传成功')
                    this.dataForm.img_url = resData.filePath
                    this.dataForm.cover_picture_id = resData.fileId
                    this.dataForm.cover_picture_folder_id = resData.folderId
                    this.dataForm.cover_template_id = ''
                }
            })
        },
        // 上传个数限制
        fileExceed() {
            this.$notify({
                title: '提示',
                message: '最多上传一张图片',
                type: "warning",
            })
        },
        fileRemove() {
            this.dataForm.img_url = this.coverImageList[0].url
            this.dataForm.cover_template_id = '1'
            this.dataForm.cover_picture_id = this.coverImageList[0].fileId
            this.dataForm.cover_picture_folder_id = this.coverImageList[0].folderId
        },
        /* 删除 */
        deleteForm(row) {
            this.$confirm(this.$t('deletePrompt.promptContent'), this.$t('deletePrompt.promptTitle'), {
                confirmButtonText: this.$t('buttonModule.modalSureBtn'), cancelButtonText: this.$t('buttonModule.modalCancelBtn'), type: 'warning'
            }).then(() => {
                deleteNotice(row.F_Id).then(() => {
                    this.searchParam.limit = 1;
                    this.getData(this.searchParam);
                    this.$notify({ title: this.$t('deletePrompt.successTitle'), message: this.$t('deletePrompt.successDeleted'), type: 'success' });
                })
            }).catch(() => {
                this.$notify({ title: this.$t('deletePrompt.failureTitle'), message: this.$t('deletePrompt.failedDeleted'), type: 'warning' });
            });
        },
        /* 提交表单 */
        formSubmit(formName) {
            this.flagNotice = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.dataForm))
                    params.is_top = params.is_top ? 1 : 0
                    params.user_ids = params.user_ids.split(',')
                    if (this.flag) {
                        addNotice({ xjr_oa_app_notificationEntity: params }).then(() => {
                            this.addVisible = false;
                            this.$notify.success('新增成功')
                            this.searchParam.limit = 1;
                            this.getData(this.searchParam);
                        }).finally(() => {
                            this.flagNotice = false;
                        })
                    } else {
                        modifyNotice(params.F_Id, { xjr_oa_app_notificationEntity: params }).then(() => {
                            this.addVisible = false;
                            this.$notify.success('编辑成功')
                            this.searchParam.limit = 1;
                            this.getData(this.searchParam);
                        }).finally(() => {
                            this.flagNotice = false;
                        })
                    }
                } else {
                    this.flagNotice = false;
                    return false;
                }
            });
        },
        /* 取消弹窗 */
        cancelForm(formName) {
            this.flagNotice = false;
            this.addVisible = false;
        },
        /* 关闭弹窗 */
        handleClose(done) {
            done();
        },
        /* 页面加载 */
        handleCurrentChange(current) {
            this.searchParam.limit = current;
            this.getData(this.searchParam);
        },
        handleSizeChange(page) {
            this.searchParam.size = page
            this.searchParam.limit = 1
            this.getData(this.searchParam);
        },
        /* 查询 */
        searchData() {
            this.searchParam.limit = 1;
            this.getData(this.searchParam);
        },
        /* 查询表单重置 */
        searchReset() {
            this.searchParam.queryStr = '';
            this.getData(this.searchParam);
        },
        // 公告管理
        bannerHandle() {
            this.bannerVisible = true
            this.getNotificationInfo()
        },
        // 提交轮播
        submitBanner() {
            notificationAmount(this.bannerInfo.slideshow_amount.toString()).then(res => {
                if (res.data.success) {
                    this.$notify.success('修改成功')
                    this.bannerVisible = false
                } else {
                    this.$notify.warning('修改失败')
                }
            })
        },
        // 编辑封面图片
        editImage() {
            this.coverVisible = true
        },
        confirmCover() {
            this.coverImageList.forEach(ele => {
                if (this.dataForm.cover_template_id == ele.type) {
                    this.dataForm.img_url = ele.url
                    this.dataForm.cover_picture_id = ele.fileId
                    this.dataForm.cover_picture_folder_id = ele.folderId
                }
            })
            this.$refs.elFile.clearFiles()
            this.coverVisible = false
        }
    }
}
</script>

<style lang="scss" scoped>
ul,
li,
ol,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    object-fit: contain;
}

.main-container {
    height: auto;
}

.main {
    background-color: #fff;
    padding: 26px 42px 0;
    height: auto;
}

.search-container {
    display: flex;
    justify-content: space-between;
    padding-bottom: 45px;
    ::v-deep .el-input__inner{
        height: 29px;
        line-height: 29px
    }
    .left {
        display: flex;

        .item-box {
            display: flex;
            align-items: center;

            .name {
                color: #666;
                min-width: 70px;
                font-size: 14px;
            }

            .el-select {
                width: 140px;
                margin-right: 40px;
            }
        }
        .reset {
            margin-left: 20px;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .el-button {
            margin-right: 5px;
        }

        .sort {
            cursor: pointer;
            font-size: 26px;
        }
    }
}

.table-container {
    overflow-y: auto;
    overflow-x: hidden;

    .toggle-static {
        position: relative;
        width: 190px;
        height: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;

        .tip-text {
            width: 70%;
            position: absolute;
            top: 40%;
            left: 50%;
            color: #fff;
            margin-left: -80px;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

        }
    }

    &>div>li:first-child {
        margin-top: 0;
    }

    &>div>li {
        padding-bottom: 38px;
        margin-top: 38px;
        border-bottom: 1px solid #DEDEDE;
        display: flex;
        align-items: center;

        .el-image {
            margin-right: 20px;
        }

        .right-content {
            flex: 1;
            overflow: hidden;

            h5 {
                display: flex;
                align-items: center;
                cursor: pointer;
                margin: 0 0 10px 0;
                font-size: 16px;
                color: #333;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                span {
                    padding-left: 5px;
                }

                .top,
                .fa,
                .bufa {
                    font-size: 12px;
                    color: #fff;
                    padding: 2px 5px;
                    border-radius: 5px;
                }
                .top{
                    margin-right: 5px;
                    color: #fff;
                    background-color: #FF5700;
                }
                .fa{
                    margin-left: 15px;
                    color: #10A300;
                    background-color: #D8F8DD;
                }
                .bufa{
                    margin-left: 15px;
                    color: #FE8B04;
                    background-color: #FFF2E0;
                }
            }

            .msg {
                margin-bottom: 5px;
                font-size: 14px;
                color: #555;

                span {
                    color: #999;
                    padding-right: 5px;
                }
            }

            .opera {
                display: flex;
                align-items: center;
                margin-top: 10px;

                li {
                    display: flex;
                    align-items: center;
                    margin-right: 15px;
                    img{
                        position: relative;
                        top: 2px;
                        width: 11px;
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}

.add-dialog {
    ::v-deep .el-dialog__body {
        height: 600px;
        overflow-y: auto;
    }

    .picture-item {
        ::v-deep .el-form-item__content {
            position: relative;
            width: 450px;

            .picture-container {
                margin-top: 10px;
            }

            .text {
                position: absolute;
                width: 300px;
                top: 40%;
                left: 50%;
                margin-left: -146px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 22px;
                color: #fff;
                line-height: 28px
            }

            .edit-image {
                position: absolute;
                top: 85px;
                right: 20px
            }
        }
    }
}

.banner-dialog {
    .header {
        display: flex;
        align-items: center;
        margin: 15px 0;

        .title {
            width: 120px;
            margin: 0;
        }

        .el-input-number {
            width: 150px;
        }

        ::v-deep .el-input-number__decrease {
            top: 7px;
            height: 25px;
            line-height: 26px;
        }

        ::v-deep .el-input-number__increase {
            top: 7px;
            height: 25px;
            line-height: 26px;
        }
    }
}

.el-pagination {
    position: fixed;
    bottom: 43px;
    right: 59px;
}

.news-dialog {
    ::v-deep .el-dialog__body {
        height: 600px;
        overflow-y: auto;
    }

    .header {
        .msg {
            span:first-child {
                margin-right: 10px;
                padding-right: 5px;
            }

            span {
                padding-right: 10px;
            }
        }
    }
}

.cover-dialog {
    .header {
        display: flex;
        align-items: center;

        .name {
            width: 80px
        }

        .el-input {
            flex: 1
        }
    }

    .banner-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
            width: 48%;
            position: relative;

            .el-radio {
                position: absolute;
                top: 20px;
                right: 20px;

                ::v-deep .el-radio__inner {
                    width: 20px;
                    height: 20px;

                    .el-radio__inner::after {
                        width: 8px;
                        height: 8px;
                    }
                }

                ::v-deep .el-radio__label {
                    display: none
                }
            }
        }
    }
}
</style>